<template>
    <div class="el-box">
        <TopNav></TopNav>
        <div class="el-body-box">
            <el-main class="el-main">

                <ul class="stepBar">
                    <li :class="currentStep === 1?'step stepActive':'step'">
                        <span>确认订单信息</span>
                    </li>
                    <li :class="currentStep === 2?'step stepActive':'step'">
                        <span>选择支付方式</span>
                    </li>
                    <li :class="currentStep === 3?'step stepActive':'step'">
                        <span>支付成功</span>
                    </li>
                </ul>

                <!--确认订单-->
                <ConfirmOrder :handleStep="handleStep" :handleOrderId="handleOrderId" v-if="currentStep === 1"/>

                <!--支付方式-->
                <PaymentMethod :handleStep="handleStep" :orderNumber="orderNumber" v-if="currentStep === 2"/>

                <!--支付成功-->
                <PaySuccess :handleStep="handleStep" v-if="currentStep === 3"/>
            </el-main>
        </div>
    </div>
</template>

<script src="./index.js"></script>
<style lang="scss" scope src="./index.scss"></style>
<!-- 只在当前页面起作用 -->
<!-- <style lang="scss" scoped src="./index.scoped.scss"></style> -->
<!-- 全面页面起作用，先不作推荐 -->
